<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form" @submit="handleSubmit" :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol">
        <a-row :gutter="48">

          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="款号">
              <a-input placeholder="输入商品款号搜索" v-decorator="['productNo']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="品牌">
              <a-select placeholder="全部" v-decorator="['brandId']">
                <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">{{ item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="年份">
              <a-date-picker format="YYYY" :open="openYear" @openChange="openChange" @change="handleChange" mode="year"
                @panelChange="panelChange" :value="year" />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="季节">
              <a-select placeholder="全部" v-decorator="['season']">
                <a-select-option :value="item" v-for="(item) in seasons" :key="item.id">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="波段(月)">
              <a-select placeholder="全部" v-decorator="['productBandMonth']">
                <a-select-option :value="item" v-for="(item) in months" :key="`m-${item}`">
                  {{ `${item}月` }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="波段">
              <a-select placeholder="全部" v-decorator="['productBand']">
                <a-select-option :value="item" v-for="(item) in ['A', 'B', 'C']" :key="`m-${item}`">
                  {{ `${item}` }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="搭配风格">
              <a-select placeholder="全部" v-decorator="['labelId']">
                <a-select-option :value="item.code" v-for="item in styleOptions" :key="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="来源">
              <a-select placeholder="全部" v-decorator="['type']">
                <a-select-option :value="item.code" v-for="item in typeList.slice(0, 3)" :key="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="素材类型">
              <a-select placeholder="全部" v-decorator="['sonType']">
                <a-select-option :value="item.code" v-for="item in sonTypeList" :key="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="文案">
              <a-input placeholder="输入内容关键字搜索" v-decorator="['content']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="搭配评级">
              <a-select placeholder="全部" v-decorator="['level']">
                <a-select-option :value="item.code" v-for="item in levels" :key="`lv-${item.code}`">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="状态">
              <a-select placeholder="全部" v-decorator="['sync', { initialValue: 0 }]">
                <a-select-option :value="item.code" v-for="item in syncList" :key="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item>
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button type="primary" @click="resetForm" style="margin-left:10px">重置</a-button>
              <!-- <a-button type="primary" @click="$router.push(`/micromall/collocation/createOfficial`)" style="margin-left:10px">新建</a-button> -->
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table bordered :columns="columns" :rowKey="record => record.lookId"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :data-source="dataSource"
      :pagination="pagination" :scroll="{ x: true }" @change="handleTableChange" :loading="loading">
      <template slot="collocationPic" slot-scope="text, record">
        <div>
          <img :src="item" alt="" @click="previewHandler(record.lookUrlList, index)"
            v-for="(item, index) in record.lookUrlList.slice(0, 3)" :key="item" class="dp-img" />
          <span class="secend-text">共{{ record.lookUrlList.length }}张</span>
        </div>
      </template>
      <template slot-scope="text, record" slot="goods">
        <a-row class="goodsInfo">
          <a-col :span="24" v-for="(item, index) in record.productList.slice(0, 3)" :key="`info${index}`"
            @click="showGoodsTable(record.productList)">
            {{ item.productNo + '(' + item.year + '/' + item.band + '/' + item.season + ')' }}</a-col>
          <a-col style="margin-top:20px" class="secend-text" :span="24" @click="showGoodsTable(record.productList)">共{{
            record.productList.length }}款<a-icon type="right" style="font-size:12px" /></a-col>
        </a-row>
      </template>

      <template slot-scope="text, record" slot="asyncStatus">
        <span>{{ record.sync == 1 ? '已同步' : '未同步' }}</span>
      </template>
      <template slot="source" slot-scope="text, record">
        <!-- <span> {{ record.type }}</span> <br /> -->
        <span class="secend-text">{{ formatSource(record.type) }}</span>
      </template>
      <template slot="actions" slot-scope="text, record">
        <a-button type="link" @click="addMore(record)">添加至更多搭配</a-button>
        <a-button type="link" @click="quityadd(record)">快速启用</a-button>
      </template>
    </a-table>
    <div style="padding:10px">
      <a-button type="primary" style="margin-right:10px" @click="allSelectHandle">全选</a-button>
      <a-button type="primary" @click="batchOpen">批量启用</a-button>
    </div>
    <GoodsList v-if="showGoodsList" @close="close" :dataSource="collocationGoods" />
    <ParagraphPic :visible.sync="showPreview" :imgs="showImgs" :current="current" />
  </a-card>
</template>
<script>
import { listMixin } from '../util/listMixin'
import collocationMixin from '../collocation/collocationMixin'
import GoodsImgList from './GoodsImgList.vue'
import GoodsList from './GoodsList.vue'
import ParagraphPic from './ParagraphPic.vue'
import { lookList, lookLabel, createMoreCollocation } from '@/api/micromall/collocation.js'
const columns = [
  {
    title: '搭配图',
    width: 260,
    scopedSlots: { customRender: 'collocationPic' }
  },
  {
    title: '内容文案',
    align: 'center',
    dataIndex: 'content'
  },
  {
    title: '搭配商品',
    width: 250,
    align: 'center',
    scopedSlots: { customRender: 'goods' }
  },
  {
    title: '状态',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'asyncStatus' }
  },
  {
    title: '来源',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'source' }
  },
  {
    title: '操作',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'actions' }
  }
]
export default {
  mixins: [listMixin],
  components: { GoodsImgList, ParagraphPic, GoodsList },
  data() {
    return {
      columns,
      dataSource: [],
      loading: false,
      showPreview: false,
      showImgs: [],
      current: 1,
      showGoodsList: false,
      collocationGoods: [],
      syncList: [
        {
          name: '全部',
          code: ''
        },
        {
          name: '未同步',
          code: 0
        },
        {
          name: '已同步',
          code: 1
        }
      ],
      sonTypeList: [],
      styleOptions: [],
      brands: [],
      months: [],
      seasons: ['春', '夏', '秋', '冬'],
      openYear: false,
      levels: [
        {
          code: '10',
          name: 'S'
        },
        {
          code: '20',
          name: 'A'
        },
        {
          code: '30',
          name: 'B'
        }
      ],
      typeList: [
        {
          name: '有搭素材',
          code: 'B10-A01'
        },
        {
          name: '零售素材',
          code: 'B10-A02'
        },
        {
          name: '导购素材',
          code: 'B10-A03'
        },
        {
          name: '微商城',
          code: 'B10-A04'
        }
      ],
      year: null,
      selectedRowKeys: [],
      formItemLayout:{
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      }
    }
  },
  computed: {
    formatSource() {
      return function (codes) {
        return this.typeList.filter(item => codes.includes(item.code)).map(item => item.name).join(',')

      }
    }
  },
  mounted() {
    this.typeleList()
  },
  methods: {
    openChange(status) {
      this.openYear = status
    },
    handleChange(value) {
      console.log(value)
      this.year = value;
    },
    panelChange(value, mode) {
      console.log('panelChange', value)
      this.year = moment(value).format('YYYY')
      this.openYear = false;
    },
    allSelectHandle() {
      this.selectedRowKeys = this.dataSource.map(item => item.lookId)
    },
    prohibit() {

    },
    batchOpen() {
      let list = this.dataSource.filter(item => this.selectedRowKeys.includes(item.lookId))
      if (list.length < 1) {
        return this.$message.error('请先选择搭配')
      }
      this.$confirm({
        title: '确定启用选中套搭配吗？',
        content: "启用后将有可能出现在主款详情页",
        onOk: () => {
          let params = list.map(record => {
            const { productList, type: source, lookId, sonType, labelNameId } = record
            return {
              pageStr: 1,
              source,
              lookId,
              sonType,
              labelNameId,
              enable: 1,
              saveCollocationMoreDtoList: productList.map((item, index) => {
                return {
                  sorting: index,
                  productNoMore: item.productNo,
                  colorCode: item.colorCode
                }
              })
            }
          })
          createMoreCollocation(params).then(res => {
            if (res.code == 200) {
              this.$message.success('快速启用成功')
              this.$router.back()
            }
          })
          console.log(JSON.stringify(params))
        },
        onCancel() {
          console.log('Cancel');
        }
      });


    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    async styleList() {
      const re = await lookLabel({ code: 'B08-A01' })
      console.log(re)
      this.styleOptions = re.data
    },
    async typeleList() {
      const re = await lookLabel({ code: 'B10-A02' })
      console.log(re)
      this.sonTypeList = re.data
    },
    quityadd(record) {
      this.$confirm({
        title: '确定启用该套搭配吗？',
        content: "启用后将有可能出现在主款详情页",
        onOk: () => {
          const { productList, type: source, lookId, sonType, labelNameId } = record
          let params = {
            pageStr: 1,
            source,
            lookId,
            sonType,
            labelNameId,
            enable: 1,
            saveCollocationMoreDtoList: productList.map((item, index) => {
              return {
                sorting: index,
                productNoMore: item.productNo,
                colorCode: item.colorCode
              }
            })
          }
          createMoreCollocation([params]).then(res => {
            if (res.code == 200) {
              this.$message.success('快速启用成功')
              this.$router.back()
            }
          }, err => {

          })
          console.log(JSON.stringify(params))
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    },
    addMore(record) {
      console.log(record)
      const { productList, type: source, lookId, sonType, labelNameId } = record
      const params = {
        pageStr: 1,
        source,
        lookId,
        enable: 0,
        sonType,
        labelNameId,
        saveCollocationMoreDtoList: productList.map((item, index) => {
          return {
            sorting: index,
            productNoMore: item.productNo,
            colorCode: item.colorCode
          }
        })
      }
      console.log(params)
      this.$emit('addMore', params)
    },
    showGoodsTable(collocationGoods) {
      console.log('table', collocationGoods)
      this.collocationGoods = collocationGoods
      this.showGoodsList = true
    },
    close() {
      this.showGoodsList = false
      this.collocationGoods = []
    },
    previewHandler(imgs, index) {
      console.log(imgs, index)
      this.showImgs = imgs
      this.showPreview = true
      this.current = index
    },
    loadData(current) {
      this.loading = true
      if (current === 1) {
        this.pagination.current = 1
      }
      var params = this.getQueryParams() //查询条件

      // 增加状态
      // params.type = this.type
      // params.brandId = 15

      // if(params.type == undefined){
      //   params.types= 'B08-A01,B08-A02,B08-A04'
      // }
      console.log(params)
      params.pageNo = params.current
      params.pageSize = params.size
      delete params.current
      delete params.size
      lookList(params).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data.materialList
          if (res.data.page.count) {
            this.pagination.total = res.data.page.count
          } else {
            this.pagination.total = 0
          }
        } else {
          this.$message.warning(res.msg)
        }
        this.loading = false
      })
    },
    getPopupContainer(trigger) {
      return trigger.parentElement
    }
  }
}
</script>
<style scoped>
.copywtiting {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-img {
  width: 50px;
  height: auto;
}

.dp-img:not(:last-child) {
  margin-right: 10px;
}

.secend-text {
  color: #999;
}

.ant-input {
  width: 200px;
}

.ant-form-item-label {
  width: 80px;
}
</style>
